﻿<link href="/Common/layim/dist/css/layui.css" rel="stylesheet" />
<fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;">
    <legend>按钮主题</legend>
    <div>
        <button class="layui-btn layui-btn-primary">原始按钮</button>
        <button class="layui-btn">默认按钮</button>
        <button class="layui-btn layui-btn-normal">百搭按钮</button>
        <button class="layui-btn layui-btn-warm">暖色按钮</button>
        <button class="layui-btn layui-btn-danger">警告按钮</button>
        <button class="layui-btn layui-btn-disabled">禁用按钮</button>
    </div>
</fieldset>
<fieldset class="layui-elem-field site-demo-button">
    <legend>按钮尺寸</legend>
    <div>
        <button class="layui-btn layui-btn-primary layui-btn-lg">大型按钮</button>
        <button class="layui-btn layui-btn-primary">默认按钮</button>
        <button class="layui-btn layui-btn-primary layui-btn-sm">小型按钮</button>
        <button class="layui-btn layui-btn-primary layui-btn-xs">迷你按钮</button>

        <br>

        <button class="layui-btn layui-btn-lg">大型按钮</button>
        <button class="layui-btn">默认按钮</button>
        <button class="layui-btn layui-btn-sm">小型按钮</button>
        <button class="layui-btn layui-btn-xs">迷你按钮</button>

        <br>

        <button class="layui-btn layui-btn-lg layui-btn-normal">大型按钮</button>
        <button class="layui-btn layui-btn-normal">默认按钮</button>
        <button class="layui-btn layui-btn-sm layui-btn-normal">小型按钮</button>
        <button class="layui-btn layui-btn-xs layui-btn-normal">迷你按钮</button>

        <br>

        <div style="width: 216px; margin: 0;">
            <!-- layui 2.2.5 新增 -->
            <button class="layui-btn layui-btn-fluid">流体按钮</button>
        </div>
    </div>
</fieldset>
<fieldset class="layui-elem-field site-demo-button">
    <legend>灵活的图标按钮（更多图标请阅览：文档-图标）</legend>
    <div>
        <button class="layui-btn"><i class="layui-icon"></i></button>
        <button class="layui-btn"><i class="layui-icon"></i></button>
        <button class="layui-btn"><i class="layui-icon"></i></button>
        <button class="layui-btn"><i class="layui-icon"></i></button>
        <button class="layui-btn"><i class="layui-icon"></i></button>
        <button class="layui-btn"><i class="layui-icon"></i></button>

        <br>

        <button class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>

        <br>

        <button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>

        <button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>

        <button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
    </div>
</fieldset>
<fieldset class="layui-elem-field site-demo-button">
    <legend>还可以是圆角按钮</legend>
    <div>
        <button class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
        <button class="layui-btn layui-btn-radius">默认按钮</button>
        <button class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
        <button class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
        <button class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
        <button class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
    </div>
</fieldset>
<fieldset class="layui-elem-field site-demo-button">
    <legend>风格混搭的按钮</legend>
    <div>
        <button class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius">大型加圆角</button>
        <a href="http://www.layui.com/doc/element/button.html" class="layui-btn" target="_blank">跳转的按钮</a>
        <button class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon"></i> 删除</button>
        <button class="layui-btn layui-btn-xs layui-btn-disabled"><i class="layui-icon"></i> 分享</button>
    </div>
</fieldset>

<fieldset class="layui-elem-field site-demo-button">
    <legend>按钮组</legend>
    <div class="layui-btn-group">
        <button class="layui-btn">增加</button>
        <button class="layui-btn ">编辑</button>
        <button class="layui-btn">删除</button>
    </div>
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
    </div>
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-primary layui-btn-sm">文字</button>
        <button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
        <button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
    </div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>小徽章、大家族</legend>
</fieldset>

<blockquote class="layui-elem-quote layui-quote-nm">
    小圆点：
    <span class="layui-badge-dot"></span>
    <span class="layui-badge-dot layui-bg-orange"></span>
    <span class="layui-badge-dot layui-bg-green"></span>
    <span class="layui-badge-dot layui-bg-cyan"></span>
    <span class="layui-badge-dot layui-bg-blue"></span>
    <span class="layui-badge-dot layui-bg-black"></span>
    <span class="layui-badge-dot layui-bg-gray"></span>

    <br><br>常规弧形徽章：
    <span class="layui-badge">6</span>
    <span class="layui-badge">待办事项99</span>
    <span class="layui-badge">61728</span>
    <span class="layui-badge">赤</span>
    <span class="layui-badge layui-bg-orange">橙</span>
    <span class="layui-badge layui-bg-green">绿</span>
    <span class="layui-badge layui-bg-cyan">青</span>
    <span class="layui-badge layui-bg-blue">蓝</span>
    <span class="layui-badge layui-bg-black">黑</span>
    <span class="layui-badge layui-bg-gray">灰</span>

    <br><br>边框徽章：
    <span class="layui-badge-rim">6</span>
    <span class="layui-badge-rim">Hot</span>
</blockquote>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>与其它元素的搭配</legend>
</fieldset>

<button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>
<button class="layui-btn">动态<span class="layui-badge-dot layui-bg-orange"></span></button>

<br><br>

<ul class="layui-nav style=" text-align:=" " right;" ="">
    &lt;-- 小Tips：这里有没有发现，设置导航靠右对齐（或居中对齐）其实非常简单 --&gt;
    <li class="layui-nav-item">
        <a href="">控制台<span class="layui-badge">9</span></a>
    </li>
    <li class="layui-nav-item">
        <a href="">个人中心<span class="layui-badge-dot"></span></a>
    </li>
</ul>
<br>

<div class="layui-tab layui-tab-brief">
    <ul class="layui-tab-title">
        <li class="layui-this">网站设置</li>
        <li>用户管理<span class="layui-badge-dot"></span></li>
        <li>最新邮件<span class="layui-badge">99+</span></li>
    </ul>
    <div class="layui-tab-content"></div>
</div>

<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">待办事项</div>
                <div class="layui-card-body">
                    卡片式面板面板通常用于非白色背景色的主体内<br>
                    从而映衬出边框投影
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">通知公告</div>
                <div class="layui-card-body">
                    结合 layui 的栅格系统<br>
                    轻松实现响应式布局
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">标题</div>
                <div class="layui-card-body">
                    内容
                </div>
            </div>
        </div>
    </div>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>常规折叠面板</legend>
</fieldset>
<div class="layui-collapse" lay-filter="test">
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">为什么JS社区大量采用未发布或者未广泛支持的语言特性？</h2>
        <div class="layui-colla-content">
            <p>有不少其他答案说是因为JS太差。我下面的答案已经说了，这不是根本性的原因。但除此之外，我还要纠正一些对JS具体问题的误解。JS当初是被作为脚本语言设计的，所以某些问题并不是JS设计得差或者是JS设计者的失误。比如var的作用域问题，并不是“错误”，而是当时绝大部分脚本语言都是这样的，如perl/php/sh等。模块的问题也是，脚本语言几乎都没有模块/命名空间功能。弱类型、for-in之类的问题也是，只不过现在用那些老的脚本语言的人比较少，所以很多人都误以为是JS才有的坑。另外有人说JS是半残语言，满足不了开发需求，1999年就该死。半残这个嘛，就夸张了。JS虽然有很多问题，但是设计总体还是优秀的。——来自知乎@贺师俊</p>
        </div>
    </div>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">为什么前端工程师多不愿意用 Bootstrap 框架？</h2>
        <div class="layui-colla-content">
            <p>因为不适合。如果希望开发长期的项目或者制作产品类网站，那么就需要实现特定的设计，为了在维护项目中可以方便地按设计师要求快速修改样式，肯定会逐步编写出各种业务组件、工具类，相当于为项目自行开发一套框架。——来自知乎@Kayo</p>
        </div>
    </div>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">layui 更适合哪些开发者？</h2>
        <div class="layui-colla-content">
            <p>
                在前端技术快速变革的今天，layui 仍然坚持语义化的组织模式，甚至于模块理念都是采用类AMD组织形式，并非是有意与时代背道而驰。layui 认为以jQuery为核心的开发方式还没有到完全消亡的时候，而早期市面上基于jQuery的UI都普通做得差强人意，所以需要有一个新的UI去重新为这一领域注入活力，并采用一些更科学的架构方式。
                <br><br>
                因此准确地说，layui 更多是面向那些追求开发简单的前端工程师们，以及所有层次的服务端程序员。
            </p>
        </div>
    </div>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">贤心是男是女？</h2>
        <div class="layui-colla-content">
            <p>man！ 所以这个问题不要再出现了。。。</p>
        </div>
    </div>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>手风琴折叠</legend>
</fieldset>
<div class="layui-collapse" lay-accordion="">
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">layui 更适合哪些开发者？</h2>
        <div class="layui-colla-content layui-show">
            <p>
                在前端技术快速变革的今天，layui 仍然坚持语义化的组织模式，甚至于模块理念都是采用类AMD组织形式，并非是有意与时代背道而驰。layui 认为以jQuery为核心的开发方式还没有到完全消亡的时候，而早期市面上基于jQuery的UI都普通做得差强人意，所以需要有一个新的UI去重新为这一领域注入活力，并采用一些更科学的架构方式。
                <br>
                因此准确地说，layui 更多是面向那些追求开发简单的前端工程师们，以及所有层次的服务端程序员。
            </p>
        </div>
    </div>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">为什么JS社区大量采用未发布或者未广泛支持的语言特性？</h2>
        <div class="layui-colla-content">
            <p>有不少其他答案说是因为JS太差。我下面的答案已经说了，这不是根本性的原因。但除此之外，我还要纠正一些对JS具体问题的误解。JS当初是被作为脚本语言设计的，所以某些问题并不是JS设计得差或者是JS设计者的失误。比如var的作用域问题，并不是“错误”，而是当时绝大部分脚本语言都是这样的，如perl/php/sh等。模块的问题也是，脚本语言几乎都没有模块/命名空间功能。弱类型、for-in之类的问题也是，只不过现在用那些老的脚本语言的人比较少，所以很多人都误以为是JS才有的坑。另外有人说JS是半残语言，满足不了开发需求，1999年就该死。半残这个嘛，就夸张了。JS虽然有很多问题，但是设计总体还是优秀的。——来自知乎@贺师俊</p>
        </div>
    </div>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">为什么前端工程师多不愿意用 Bootstrap 框架？</h2>
        <div class="layui-colla-content">
            <p>因为不适合。如果希望开发长期的项目或者制作产品类网站，那么就需要实现特定的设计，为了在维护项目中可以方便地按设计师要求快速修改样式，肯定会逐步编写出各种业务组件、工具类，相当于为项目自行开发一套框架。——来自知乎@Kayo</p>
        </div>
    </div>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">贤心是男是女？</h2>
        <div class="layui-colla-content">
            <p>man！ 所以这个问题不要再出现了。。。</p>
        </div>
    </div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>面板嵌套</legend>
</fieldset>
<div class="layui-collapse" lay-accordion="">
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">文豪</h2>
        <div class="layui-colla-content layui-show">

            <div class="layui-collapse" lay-accordion="">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">唐代</h2>
                    <div class="layui-colla-content layui-show">

                        <div class="layui-collapse" lay-accordion="">
                            <div class="layui-colla-item">
                                <h2 class="layui-colla-title">杜甫</h2>
                                <div class="layui-colla-content layui-show">
                                    伟大的诗人
                                </div>
                            </div>
                            <div class="layui-colla-item">
                                <h2 class="layui-colla-title">李白</h2>
                                <div class="layui-colla-content">
                                    <p>据说是韩国人</p>
                                </div>
                            </div>
                            <div class="layui-colla-item">
                                <h2 class="layui-colla-title">王勃</h2>
                                <div class="layui-colla-content">
                                    <p>千古绝唱《滕王阁序》</p>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">宋代</h2>
                    <div class="layui-colla-content">
                        <p>比如苏轼、李清照</p>
                    </div>
                </div>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">当代</h2>
                    <div class="layui-colla-content">
                        <p>比如贤心</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">科学家</h2>
        <div class="layui-colla-content">
            <p>伟大的科学家</p>
        </div>
    </div>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">艺术家</h2>
        <div class="layui-colla-content">
            <p>浑身散发着艺术细胞</p>
        </div>
    </div>
</div>

<br>
<p>支持无限嵌套，应用场景非常多！</p>


<table class="layui-hide" id="demo" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<div class="layui-tab layui-tab-brief" lay-filter="demo">
    <ul class="layui-tab-title">
        <li class="layui-this">演示说明</li>
        <li>日期</li>
        <li>分页</li>
        <li>上传</li>
        <li>滑块</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">

            <div class="layui-carousel" id="test1">
                <div carousel-item>
                    <div><p class="layui-bg-green demo-carousel">在这里，你将以最直观的形式体验 layui！</p></div>
                    <div><p class="layui-bg-red demo-carousel">在编辑器中可以执行 layui 相关的一切代码</p></div>
                    <div><p class="layui-bg-blue demo-carousel">你也可以点击左侧导航针对性地试验我们提供的示例</p></div>
                    <div><p class="layui-bg-orange demo-carousel">如果最左侧的导航的高度超出了你的屏幕</p></div>
                    <div><p class="layui-bg-cyan demo-carousel">你可以将鼠标移入导航区域，然后滑动鼠标滚轮即可</p></div>
                </div>
            </div>
        </div>
        <div class="layui-tab-item">
            <div id="laydateDemo"></div>
        </div>
        <div class="layui-tab-item">
            <div id="pageDemo"></div>
        </div>
        <div class="layui-tab-item">
            <div class="layui-upload-drag" id="uploadDemo">
                <i class="layui-icon"></i>
                <p>点击上传，或将文件拖拽到此处</p>
            </div>
        </div>
        <div class="layui-tab-item">
            <div id="sliderDemo" style="margin: 50px 20px;"></div>
        </div>
    </div>
</div>

<blockquote class="layui-elem-quote layui-quote-nm layui-hide" id="footer">layui {{ layui.v }} 提供强力驱动</blockquote>

<script src="/Common/layim/dist/layui.all.js"></script>
<script>
    layui.config({
        version: '1545041465443' //为了更新 js 缓存，可忽略
    });

    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function () {
        var laydate = layui.laydate //日期
            , laypage = layui.laypage //分页
            , layer = layui.layer //弹层
            , table = layui.table //表格
            , carousel = layui.carousel //轮播
            , upload = layui.upload //上传
            , element = layui.element //元素操作
            , slider = layui.slider //滑块

        //向世界问个好
        layer.msg('Hello World');

        //监听Tab切换
        element.on('tab(demo)', function (data) {
            layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
                tips: 1
            });
        });

        //执行一个 table 实例
        table.render({
            elem: '#demo'
            , height: 420
            , url: '/demo/table/user/' //数据接口
            , title: '用户表'
            , page: true //开启分页
            , toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , totalRow: true //开启合计行
            , cols: [[ //表头
                { type: 'checkbox', fixed: 'left' }
                , { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left', totalRowText: '合计：' }
                , { field: 'username', title: '用户名', width: 80 }
                , { field: 'experience', title: '积分', width: 90, sort: true, totalRow: true }
                , { field: 'sex', title: '性别', width: 80, sort: true }
                , { field: 'score', title: '评分', width: 80, sort: true, totalRow: true }
                , { field: 'city', title: '城市', width: 150 }
                , { field: 'sign', title: '签名', width: 200 }
                , { field: 'classify', title: '职业', width: 100 }
                , { field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true }
                , { fixed: 'right', width: 165, align: 'center', toolbar: '#barDemo' }
            ]]
        });

        //监听头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    layer.msg('添加');
                    break;
                case 'update':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else if (data.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：' + checkStatus.data[0].id);
                    }
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        layer.msg('删除');
                    }
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                layer.msg('查看操作');
            } else if (layEvent === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') {
                layer.msg('编辑操作');
            }
        });

        //执行一个轮播实例
        carousel.render({
            elem: '#test1'
            , width: '100%' //设置容器宽度
            , height: 200
            , arrow: 'none' //不显示箭头
            , anim: 'fade' //切换动画方式
        });

        //将日期直接嵌套在指定容器中
        var dateIns = laydate.render({
            elem: '#laydateDemo'
            , position: 'static'
            , calendar: true //是否开启公历重要节日
            , mark: { //标记重要日子
                '0-10-14': '生日'
                , '2018-08-28': '新版'
                , '2018-10-08': '神秘'
            }
            , done: function (value, date, endDate) {
                if (date.year == 2017 && date.month == 11 && date.date == 30) {
                    dateIns.hint('一不小心就月底了呢');
                }
            }
            , change: function (value, date, endDate) {
                layer.msg(value)
            }
        });

        //分页
        laypage.render({
            elem: 'pageDemo' //分页容器的id
            , count: 100 //总页数
            , skin: '#1E9FFF' //自定义选中色值
            //,skip: true //开启跳页
            , jump: function (obj, first) {
                if (!first) {
                    layer.msg('第' + obj.curr + '页', { offset: 'b' });
                }
            }
        });

        //上传
        upload.render({
            elem: '#uploadDemo'
            , url: '' //上传接口
            , done: function (res) {
                console.log(res)
            }
        });

        slider.render({
            elem: '#sliderDemo'
            , input: true //输入框
        });

        //底部信息
        var footerTpl = lay('#footer')[0].innerHTML;
        lay('#footer').html(layui.laytpl(footerTpl).render({}))
            .removeClass('layui-hide');
    });
</script>

<!--<script src="/Common/barcode/jquery.qrcode.js"></script>
<script src="/Common/barcode/utf.js"></script>
<script src="/Common/barcode/jquery-ean13.min.js"></script>
<style type="text/css">
    #ean {
        margin: 100px auto;
    }



    a {
        color: #2fa0ec;
        text-decoration: none;
        outline: none;
    }

        a:hover, a:focus {
            color: #74777b;
        }

    .zzsc {
        margin: 0 auto;
        text-align: center;
        overflow: hidden;
    }
</style>



<article class="zzsc">
    <canvas id="ean" width="400" height="200"></canvas>
</article>
<div id='qrcode' style='margin-left: 45%; margin-top: 10%'></div>
<script type="text/javascript">
    $ = layui.$;
    $(function () {
        $("#ean").EAN13("5901234123457", {
            color: 'rgba(0, 0, 0, 0.8)'
        });
        createQrcode();
    });
    function makeCode(url) {
        $("#qrcode").qrcode({
            render: "canvas",
            text: url,
            width: "200",               //二维码的宽度
            height: "200",              //二维码的高度
            background: "#ffffff",       //二维码的后景色
            foreground: "#000000",        //二维码的前景色
            src: '../images/logo.png'             //二维码中间的图片
        });
    }
    function createQrcode() {
        var url = 'http://www.asxsyd92.com';//$('#url').val();
        makeCode(url);
    }

</script>-->